<template>
    <div>

<el-dialog center custom-class="select-sheet-table-div" 
    :visible.sync="DialogingTable"
    :close-on-press-escape="false" 
    :close-on-click-modal="false" 
    :show-close="false"
    :destroy-on-close="true">
    <div slot="title" class="table-dialog-title">
        <img src="@/assets/images/button/62.png" @click="returnHall" width="46" height="46" alt="">
    </div>
    
    <el-row :gutter="20" v-loading="loading" 
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-col :span="8">
            <el-tooltip class="item" effect="dark" content="双击确认选择您的身份卡" placement="top">
                <div @click="$emit('MusicSound', 'click_two')">
                    <img src="@/assets/images/other/juntuan/heilong.png" v-on:dblclick="register" class="card-img-success" alt="">
                </div>
            </el-tooltip>
        </el-col>
        <el-col :span="8">
            <el-tooltip class="item" effect="dark" content="双击确认选择您的身份卡" placement="top">l-tooltip>
                <div @click="$emit('MusicSound', 'click_two')">
                    <img src="@/assets/images/other/juntuan/jinlong.png" v-on:dblclick="register" class="card-img-success" alt="">
                </div>
            </el-tooltip>
        </el-col>
        <el-col :span="8">
            <el-tooltip class="item" effect="dark" content="双击确认选择您的身份卡" placement="top">l-tooltip>
                <div @click="$emit('MusicSound', 'click_two')">
                    <img src="@/assets/images/other/juntuan/huolong.png" v-on:dblclick="register" class="card-img-success" alt="">
                </div>
            </el-tooltip>
        </el-col>
    </el-row>
</el-dialog>
    </div>
</template>

<script>
export default {
    name:'tableSheet',
    props:{
        DialogingTable:{
            required: true,//是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false,   //没有传值的话 默认值 一般与 required:false 一起用
        },
        RoomCode:{
            required: true,//是否是必要传值  可不要时为 false
            type: String, //定义类型 类型  ：字符串类型、
            default: "",   //没有传值的话 默认值 一般与 required:false 一起用
        },
    },
    data() {
        return {
            loading: false,
        }
    },
    watch:{
        DialogingTable: {
            handler(newValue, oldValue) {
                console.log("DialogingTable newValue, oldValue :", newValue, oldValue);
            },
            deep: true,
        },
    },
    methods: {
        returnHall() {
            this.$emit('MusicSound', 'click_one');
            this.$confirm('确认取消选择身份卡，并返回主页面?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('MusicSound', 'close');
                this.$router.push('/dashboard');
            });
        },
        register() {
            this.$confirm('确认选择这张卡牌吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true;
                this.$post('/api/task/round-info.html', {room_code: this.RoomCode}).then(res => {
                    if (res.code == 200) {
                        this.$emit('closeDialog', 'logingTable', false, 'click_two');
                    } else if (res.code == 302) {
                        this.$router.push('/');
                    } else {
                        this.$notify.error({ title: '', message: res.msg});
                    }
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                    console.log(err);
                });
            });
        },
    },
}
</script>


<style scoped>
.card-img-success{
    transform: scalse(2, 2);
    transition: all 0.5s;
    display: block;
    width: 200px;
    height: 280px;
}
.card-img-success:hover{
    display: block;
    border:2px solid #00FFFF;
    background-color: #00FFFF;
    border-radius: 25px;
    width: 210px;
    height: 290px;
}
/* .card-img-div div{
    width: 160px;
    height: 108px;
} */


/* .card-img-error{
    width: 160px;
    height: 108px;
} */
</style>



